html { height: 100%; width: 100% }
body {
  color: #000;
  font: 12px sans-serif;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
a {
  color: #000;
}
.header {
  background: #ffffff;
  height: 80px;
  padding: 8px;
  width: auto;
}
#menu {
  background: transparent;
  height: auto;
  position: absolute;
  left: 25%;
  top: 58px;
  width: auto;
}
/* Set menu z-index form 1-4 */
#menu input[name="menu"] {
	display: none;
}
#menu input[name="menu"]+label {
	background: #fab900;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	box-shadow: -1px 0 1px rgba(0, 0, 0, 0.4333), 1px 0 1px rgba(0, 0, 0, 0.4333), inset 0 -2px 2px rgba(0, 0, 0, 0.4333);
  font-size: 24px;
  float:left;
  height: 38px;
  margin-left: -2px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  width: auto;
  z-index: 1;
}
#menu input[name="menu"]+label:hover {
  cursor: pointer;
}
  #menu #home:first-letter {
  	color: #fff;
  	font-size: 150%;
  }
  #menu #about:first-letter {
    color: #ffcd00;
    font-size: 150%;
  }
  #menu #news:first-letter {
    color: #b9ff00;
    font-size: 150%;
  }
  #menu #login:first-letter {
    color: #fb00ff;
    font-size: 150%;
  }

/* actived menu */
#menu input[name="menu"]:checked+label {
	background: #ffa300;
	box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.4333), 2px -2px 2px rgba(0, 0, 0, 0.4333), inset 0 0 0 rgba(0, 0, 0, 0.4333);
	margin-top: 3px;
	z-index: 4;
}

#content {
  background: #f2d857;
  box-shadow: inset 0px 5px 0px #ffa300;
  height: 100%;
  overflow: auto;
  padding: 10px;
  padding-top: 45px;
  width: auto;
}
/* Page about */
.main #header_about {
  background: transparent;
  border-right: 5px solid #f78300;
  border-bottom: 5px solid #f78300;
  font-size: 24px;
  height: 30px;
  width: 80px;
}

.main div {
	margin-top: 5px;
}
